<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
import {reactive, Ref, ref } from 'vue';
import {useECharts} from '/@/hooks/web/useECharts';
import {queryPreItemGroupStatistics} from '../api';
import {basicProps} from './props';

const props = defineProps({
    ...basicProps,
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const option = reactive({
    title: {
      text: '消费总额：￥0.00'
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '1%',
      left: 'center',
    },
    series: [
      {
        color: ['#5ab1ef', '#b6a2de', '#67e392', '#c92e57'],
        name: '消费金额',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
        animationType: 'scale',
      },
    ],
  });

  /**
   * 获取预充值分组统计
   */
  function initPreItemGroupStatistics() {
    queryPreItemGroupStatistics(null).then((res) => {
      if (res.success) {
        option.title.text = '消费总额：￥' + parseFloat(res.result.preItemTotal).toFixed(2);
        option.series[0].data = res.result.preItemStatistics;
        setOptions(option);
      }
    });
  }
  initPreItemGroupStatistics();

</script>
